import {Link, useNavigate} from 'react-router-dom'
import{ Menu } from "antd"
import {
    AppstoreOutlined,
    ContainerOutlined,
    DesktopOutlined,
    MailOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
  } from '@ant-design/icons';

  function getItem(label, key, icon, children, type) {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
  }

  const items = [
    getItem('首页', '/', <PieChartOutlined />),
    getItem('商品管理', '/goods', <DesktopOutlined />),
    getItem('用户管理', '/me', <ContainerOutlined />),
    getItem('系统管理', 'sub1', <MailOutlined />, [
      getItem('角色管理', '/roles'),
      getItem('Option 6', '6'),
      getItem('Option 7', '7'),
      getItem('Option 8', '8'),
    ]),
    getItem('其它', 'sub2', <AppstoreOutlined />, [
      getItem('Option 9', '9'),
      getItem('Option 10', '10'),
      getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
    ]),
  ];
 export function AsideMenu(){
    const navigate = useNavigate()
    const clickMenu = (data)=>{
        console.log(data)
        navigate(data.key)
    }
    return(
        <div>
             {/* <Link to="/goods?id=1111">跳转Goods页面</Link> <br/><br/>
             <Link to="/">跳转index页面</Link> <br/><br/>
             <button onClick={()=>navigate('/me')}>跳转Me页面</button> <br/><br/> */}
                  <Menu
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        theme="dark"
        onClick={clickMenu}
        items={items}
      />
        </div>
    )
 }

 export default AsideMenu